<template>
  <div id="app">
    <div id="up_div">
      <div class="app-container">
<!--        <span>入库单基本信息</span>-->
        <divider title="采购申请单信息"></divider>
        <el-divider></el-divider>
        <el-form ref="form" :model="form" label-width="150px">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="采购单号">
                <el-input v-model="form.poCode" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="采购申请单号">
                <el-input v-model="form.prCode" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请人">
                <el-input v-model="editInfo.nickName" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="申请部门">
                <el-input v-model="editInfo.deptName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物料需求截止日期" prop="requiredDate" >
                <el-date-picker clearable
                                v-model="form.requiredDate"
                                type="date"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="请选择物料需求截止日期" disabled>
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="金额总计">
                <el-input-number v-model="form.totalAmount" :precision="2" :min="0" disabled></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="数量总计" style="width: 65%">
                <el-input v-model="form.totalQuantity" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="优先级" prop="priority">
                <el-radio-group v-model="form.priority" >
                  <el-radio-button disabled
                    v-for="item in dict.type.pms_purchase_requisitions_priority"
                    :key="item.value"
                    :label="item.value"
                  >
                    {{ item.label }}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请说明">
                <el-input disabled
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="form.remark">
                </el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row :gutter="24">

            <el-col :span="8">
              <el-form-item label="供应商">
                <el-select v-model="form.supplierId" placeholder="请选择供应商" style="width: 65%" :disabled="true">
                  <el-option v-for="item in this.warehouseSupplierSelect" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
<!--            <el-col :span="8">-->
<!--              <el-form-item label="订单总税额">-->
<!--                <el-input-number v-model="form.totalTax" :step="0.01" :precision="2" :max="1" :min="0" ></el-input-number>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="8">
              <el-form-item label="预计交货日期" prop="expectedDeliveryDate">
                <el-date-picker clearable
                                v-model="form.expectedDeliveryDate"
                                type="date"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="请选择预计交货日期"
                                :disabled="true">
                </el-date-picker>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>

      </div>
    </div>

    <div id="down_div">
      <div class="app-container">
        <divider title="商品明细"></divider>
        <el-divider></el-divider>
        <!-- 这里添加一些内容使页面可滚动 -->
        <el-table
          :data="pmsPurchaseRequisitionsDetails"
          height="250"
          border
          style="width: 100%">
<!--          <el-table-column
            prop="id"
            label="id"
            width="180">
          </el-table-column>-->
          <el-table-column
            prop="productName"
            label="商品名称"
            width="180">
          </el-table-column>
          <el-table-column label="商品编码" align="center" prop="productCode" />
          <el-table-column label="sku编码" align="center" prop="skuCode" />
          <el-table-column label="规格型号" align="center" prop="productSpec" />
          <el-table-column label="单位" align="center" prop="productUnit" >
            <template slot-scope="scope">
              <dict-tag :options="dict.type.wms_product_unit" :value="scope.row.productUnit">
              </dict-tag>
            </template>
          </el-table-column>
          <!-- 循环渲染多个可编辑列 -->
          <el-table-column
            v-for="column in editableColumns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width"
            header-align="center"
          >
            <template #default="{ row, $index }">
              <el-input-number
                v-if="column.prop === 'totalAmount'"
                v-model="row[column.prop]"
                :precision="2"
                :min="1"
                disabled
                :placeholder="'请输入' + column.label"
              ></el-input-number>

              <!-- 当字段是 totalQuantity 时使用不带精度的输入框 -->
              <el-input-number
                v-else-if="column.prop === 'totalQuantity'"
                v-model="row[column.prop]"
                disabled
                :min="1"
                @change="(val) => calculateAmount(row, val)"
                :placeholder="'请输入' + column.label"
              ></el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div id="foot_div">
      <div class="button-group">
<!--        <el-button type="primary" icon="el-icon-plus" @click="handleSubmit">完成</el-button>-->
        <el-button type="primary" icon="el-icon-truck" @click="handleSubmit('3')">收货</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </div>
  </div>
</template>


<script lang="ts">

import { updatePmsPurchaseOrders } from "@/api/system/pmsPurchaseOrders"
import divider from "@/components/divider"
import {
  getSupplierSelect} from "@/api/system/selectVo"

export default {
  name:"ReceivingPmsPurchaseOrders",
  props:{
    editInfo:{}
  },
  components:{
    divider,
  },
  dicts:["wms_product_unit","pms_purchase_requisitions_priority"],
  data(){
    return{
      form:{
        supplierId:"",
        expectedDeliveryDate:"",
      },
      warehouseSupplierSelect:[],
      disabled: false,
      tableData: [],
      editableColumns: [
        { prop: 'totalQuantity', label: '数量', width: '250' },
        { prop: 'totalAmount', label: '金额', width: '250' }
      ],
      pmsPurchaseRequisitionsDetails:[],

    }
  },
  watch: {
  },
  created() {
    this.form = this.editInfo;
    this.pmsPurchaseRequisitionsDetails = this.form.pmsPurchaseRequisitionsDetails;
    this.getSupplierSelect();
  },
  methods: {
    //商品明细根据改编数量来改变金额和总金额和总数量
    calculateAmount(row, quantity) {
      row.totalAmount = parseFloat((quantity * row.unitPrice).toFixed(2))

      this.computedData();

    },


    getSupplierSelect(){
      getSupplierSelect().then(response => {
        this.warehouseSupplierSelect = response.data;
      })
    },

    //计算商品明细的金额和数量
    computedData(){
      let totalQuantity = 0;
      let totalAmount = 0;
      this.pmsPurchaseRequisitionsDetails.forEach(item => {
        totalQuantity += Number(item.totalQuantity) || 0;
        totalAmount += Number(item.totalAmount) || 0;
      });

      this.form.totalAmount=totalAmount;
      this.form.totalQuantity=totalQuantity;
    },

    handleSubmit(val){
      this.form.status = val;
      this.form.totalAmountWithTax = this.form.totalTax + this.form.totalAmount;
      this.$confirm('确定要完成收货吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updatePmsPurchaseOrders(this.form).then( response => {
          this.$message.success('收货成功');
          this.$emit('handleCancel');
        })
      });
    },

    handleCancel() {
      this.$confirm('确定要取消吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('handleCancel');
      });
    },
  }
}
</script>

<style scoped>
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 防止整个页面滚动 */
}

#app {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 3px;
  display: flex;
  flex-direction: column;
  position: relative;
}

#up_div {
  background-color: white;
  height: 30%;
  width: 100%;
  margin-bottom: 20px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  overflow-y: auto; /* 允许内容滚动 */
}

#down_div {
  background-color: white;
  flex: 1; /* 占据剩余空间 */
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  overflow-y: auto; /* 允许内容滚动 */
  margin-bottom: 60px; /* 为底部按钮留出空间 */
}

#foot_div {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.button-group {
  display: flex;
  gap: 20px;
}

.app-container {
  padding: 20px;
}
</style>
